<template>
  <div class="app-container">
    <el-card >
      <div slot="header" class="clearfix">
        <span>
          <el-form :inline="true" :model="user">
          <el-row :gutter="10">
            <el-col v-show="false">

              <el-form-item  prop="id">
                <el-input   v-model="user.id" ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="登录名" prop="username">
                <el-input disabled style="min-width: 240px;"   v-model="user.username" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item label="显示名" prop="displayName">
                <el-input disabled style="min-width: 240px;"  v-model="user.displayName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
  </el-form>
        </span>
      </div>
      <div>
        <el-row>
          <el-col >
          <el-table
            ref="multipleTable"
            :data="roles"
            border
            height="710"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              :selectable="isSelectTable"
              min-width="120">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              min-width="120">
            </el-table-column>
            <el-table-column
              prop="value"
              label="代码"
              min-width="120">
            </el-table-column>
            <el-table-column prop="disabled" label="是否可用"  min-width="120" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.disabled" disabled> </el-switch>
              </template>
            </el-table-column>
          </el-table>
          </el-col>
        </el-row>



        <br>
        <br>
        <el-row>
          <el-col :span="5" :offset="8">
            <el-button type="primary" @click="submitEdit">确定</el-button>
          </el-col>

          <el-col :span="5">
            <el-button type="danger" >清空</el-button>
          </el-col>
        </el-row>

      </div>
    </el-card>
  </div>

</template>

<script>
  import {assignRoles} from '@/api/sys/user/';
  import { getRoleListPage } from '@/api/sys/role/'
  export default {
      name:'assignRoles',
    data() {

      return {
        visible: false,
        user:{
        },
        roles:[]
      }
    },
    mounted(){
        this.init(this.$route.query.data);
    },
    methods: {
      init(row){
        let that =this;
        this.visible =true;
        this.getRoles();
        this.$nextTick(()=> {
          if(row != undefined){
            that.user = Object.assign({},row);
          }
        })
      },

      isSelectTable(row, index){
        return row.disabled;
      },
      submitEdit(){
        let that = this;
        assignRoles(that.user).then(function (result) {
          let {code,msg,data} = result.data;
          if(code == '0'){
            that.$message({
              type: 'success',
              message: msg
            });
            that.closeHandle();

          }else{
            that.$message.error(msg);
          }
        }).catch(function (error) {
          that.$message.error(error.response.data.msg);
        });

      },
      handleSelectionChange(val) {
        let that = this;
        that.user.roleIds=[]
        if(val.length > 0){
            val.forEach(item => {
                that.user.roleIds.push(item.id);
            })
        }
      },
      getRoles(){
        let that = this;
        that.roles=[];
        this.$nextTick(()=> {
          getRoleListPage({}).then(function (result) {
            let {data,code} = result.data;

            data.list.forEach((item,index) =>{
              that.roles.push(item);
            });

            that.user.roles.forEach(item =>{
              try {
                that.roles.forEach(role => {
                  if (item.id == role.id) {
                    that.$refs.multipleTable.toggleRowSelection(role)
                    foreach.break=new Error("StopIteration");
                  }

                })
              }catch(e){
                  console.info(e)
              }
            })
          }).catch(function (error) {

          });
        })
      },

      closeHandle(){
        this.visible=false;
        this.$emit('refreshDataList');

      }
    }



  }

</script>
<style>

</style>
